<template>
    <div>

        <div v-if="this.pid==2">
            申请员工：<a-input v-model="fields.staff" /><br><br>

            请假原因：<a-input v-model="fields.cause" /><br><br>

            请假时间：<a-input-group compact>
                        <a-select default-value="1">
                            <a-select-option value="1">
                            Between
                            </a-select-option>
                            <a-select-option value="2">
                            Except
                            </a-select-option>
                        </a-select>
                        <a-input style=" width: 100px; text-align: center" placeholder="开始时间" v-model="fields.start_time" />
                        <a-date-picker style="width: 25%" />
                        <a-input
                            style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                            placeholder="~"
                            disabled
                        />
                        <a-input style="width: 100px; text-align: center; border-left: 0" placeholder="结束时间" v-model="fields.end_time" />
                        <a-date-picker style="width: 25%" />
                        </a-input-group><br><br>

            审批人：
            <!-- <a-input v-model="fields.approver" /> -->
            
            <a-select v-if="fields.approver==''" v-model="approver"
                mode="multiple"
                :default-value="[]"
                style="width: 100%"
                placeholder="请选择"
            >
                <a-select-option :value="name.id" :key="name.id" v-for="name in user_list" v-if="uid!=name.id">
                    {{name.username}}
                </a-select-option>
            </a-select>
            
            <br><br>
            
            <a-button type="primary" @click="submit3">提交</a-button>
        </div>

        <div v-if="this.pid==3">
            申请员工：<a-input v-model="fields.staff" /><br><br>

            采购原因：<a-input v-model="fields.cause" /><br><br>

            商品价格：<a-input prefix="￥" suffix="RMB" v-model="fields.price" /><br><br>

            审批人：
            <!-- <a-input v-model="fields.approver" /> -->

            <a-select v-if="fields.approver==''" v-model="approver"
                mode="multiple"
                :default-value="[]"
                style="width: 100%"
                placeholder="请选择"
            >
                <a-select-option :value="name.id" :key="name.id" v-for="name in user_list" v-if="uid!=name.id">
                    {{name.username}}
                </a-select-option>
            </a-select>
            
            <br><br>

            <a-button type="primary" @click="submit4">提交</a-button>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            pid:this.$route.query.pid,
            fields:[],
            user_list:[],
            approver:[],
            uid:localStorage.getItem('uid')
        }
    },

    mounted:function(){
        this.axios.get("http://localhost:8000/getdatainfo/",{params:{'pid':this.pid}}).then(res=>{
            console.log(res.data)
            this.fields = res.data
        })

        this.getapprover()
    },

    methods:{

        // 向后端发送数据存入mysql
        submit3(){
            this.axios.post("http://localhost:8000/workorder/", this.qs.stringify({'uid':this.uid,'pid':this.pid,'staff':this.fields.staff,'cause':this.fields.cause,
            'start_time':this.fields.start_time,'end_time':this.fields.end_time,'approver':this.approver})).then(res=>{
                console.log(res.data)
                if (res.data.code == 200){
                    this.$toast('提交成功')
                }else{
                    this.$toast('提交失败')
                }
            })
        },


        // 向后端发送数据存入mysql
        submit4(){
            this.axios.post("http://localhost:8000/workorder/", this.qs.stringify({'uid':this.uid,'pid':this.pid,'staff':this.fields.staff,'cause':this.fields.cause,
            'price':this.fields.price,'approver':this.approver})).then(res=>{
                console.log(res.data)
                if (res.data.code == 200){
                    this.$toast('提交成功')
                }else{
                    this.$toast('提交失败')
                }
            })
        },


        // 向后端发送数据存入mongo
        // submit1(){
        //     this.axios.post("http://localhost:8000/getdatainfo/", this.qs.stringify({'pid':this.pid,'staff':this.fields.staff,'cause':this.fields.cause,
        //     'start_time':this.fields.start_time,'end_time':this.fields.end_time,'approver':this.fields.approver})).then(res=>{
        //         console.log(res.data)
        //         if (res.data.code == 200){
        //             this.$toast('提交成功')
        //         }else{
        //             this.$toast('提交失败')
        //         }
        //     })
        // },

        // 向后端发送数据存入mongo
        // submit2(){
        //     this.axios.post("http://localhost:8000/getdatainfo/", this.qs.stringify({'pid':this.pid,'staff':this.fields.staff,'cause':this.fields.cause,
        //     'price':this.fields.price,'approver':this.fields.approver})).then(res=>{
        //         console.log(res.data)
        //         if (res.data.code == 200){
        //             this.$toast('提交成功')
        //         }else{
        //             this.$toast('提交失败')
        //         }
        //     })
        // },

        // 获取审批人信息
        getapprover(){
            this.axios.get("http://localhost:8000/getapprover/", {params:{'pid':this.pid}}).then(res=>{
                this.user_list = res.data
                console.log(this.user_list)
            })
        },

    }
}
</script>

<style>

</style>